<template>
	<view>
		<u-navbar title="险情上报" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-leftward"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160">
				<u-form-item label="开始时间:" prop="Stime">
					<u-input v-model="form.Stime" type="text" :border="true" placeholder="请选择时间" @click="StimeFlag = true"/>
				</u-form-item>
				<u-form-item label="结束时间:" prop="Etime">
					<u-input v-model="form.Etime" type="text" :border="true" placeholder="请选择时间" @click="EtimeFlag = true"/>
				</u-form-item>
				<u-form-item label="处置方式:" prop="methods">
					<u-radio-group v-model="form.methods">
						<u-radio name="0" key="0">人工助排</u-radio>
						<u-radio name="1" key="1">清理管网</u-radio>
						<u-radio name="2" key="2">改造收水井</u-radio>
						<u-radio name="3" key="3">其他</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="产生原因:"  prop="reason"><u-input v-model="form.reason" type="textarea" :border="true" placeholder="请输入原因"/></u-form-item>
				<div style="margin-bottom: 30rpx;">现场照片(处置照片):</div>
				<view class="uni-list list-pd">
			    	<view class="uni-uploader__files">
			    		<!-- <block v-for="(image,index) in imageList" :key="index" >
			    			<view class="uni-uploader__file">
			    				<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage(index)"></image>
			    				<i class="close" @tap="deleteImage(index)"></i>
			    			</view>
			    		</block>
						<block v-for="(video,index) in videoList" :key="'video'+index">
							<view class="uni-uploader__file">
								<video :src="video" @click="playvideo(index)" @fullscreenchange="fullscreenchange" :id="'myVideo'+index"></video>
								<i class="close" @tap="deleteVideo"></i>
							</view>
						</block> -->
						
						<view class="uploader__img"><span @tap="chooseImage">添加图片</span></view>
			    	</view>
			    </view>
				<u-button type="primary" size="default" :ripple='true' style="margin-top: 30rpx;">提交</u-button>
			</u-form>
			<u-picker v-model="StimeFlag" mode="time" @confirm="confirmStime" :params="timeParams"></u-picker>
			<u-picker v-model="EtimeFlag" mode="time" @confirm="confirmEtime" :params="timeParams"></u-picker>
		</view>
		<!-- 底部导航 -->
		<u-tabbar :list="tabbarList" height="40px"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#277fe6',
				},
				showTime:false,
				form: {
					methods: '0',
					reason:'',
					Stime:'',
					Etime:'',
				},
				StimeFlag:false,
				EtimeFlag:false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				}
			}
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			confirmStime(data){  //点击开始时间控件确定按钮赋值
				this.form.Stime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			confirmEtime(data){  //点击开始时间控件确定按钮赋值
				this.form.Etime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			chooseImage(){},
			chooseVideo(){}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 40rpx;
	height: 100%;
}
.uni-uploader__files{
	display: flex;
	flex-wrap: wrap;
	.uni-uploader__file{
		width: 168rpx;
		height: 168rpx;
		margin-right: 20rpx;
		margin-bottom:20rpx;
		position: relative;
		uni-image,uni-video{
			width: 100%;
			height: 100%;
		}
		&:nth-child(3n){
			margin-right: 0rpx;
		}
		.close{
			width: 48rpx;
			height: 48rpx;
			background: url(../../../assets/images/home/icon_del.png) no-repeat 0 0;
			background-size: 100%;
			display: inline-block;
			position: absolute;
			top: -12rpx;
			right: -12rpx;
			z-index: 9;
		}
	}
}
 .uploader__img,.uploader__video{
		border: 1px dotted #C6C8CC;
		width: 166rpx;
		height: 166rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		span{
			color: #A0A8B3;
			&::before{
				content: "";
				display: block;
				width: 60rpx;
				height: 60rpx;
				background: url(../../../assets/images/home/icon_video.png) no-repeat 0 0;
				background-size: 100%;
				margin: 0 auto 12rpx;
			}
		}
	}
	
	.uploader__img{
		margin-right: 20rpx;
		span{
			&::before{
				background: url(../../../assets/images/home/icon_picture.png) no-repeat 0 0;
				background-size: 100%;
			}
		}
	}
</style>
